<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最大公约数计算器</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            color: #333;
            padding: 20px;
            box-sizing: border-box;
        }

        .container {
            background-color: #ffffff;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 90%;
            max-width: 600px;
            position: relative;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        h1 {
            color: #007bff;
            margin-bottom: 25px;
            font-size: 2.5em;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
        }

        .info-text {
            font-size: 1.1em;
            color: #6c757d;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .input-section {
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
        }

        .input-section label {
            font-weight: 600;
            color: #495057;
            font-size: 1.1em;
        }

        .input-section input[type="text"] {
            width: 80%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid #ced4da;
            font-size: 1.1em;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }

        .input-section input[type="text"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            outline: none;
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .button-group button {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .button-group button.calculate {
            background-color: #28a745;
            color: white;
        }

        .button-group button.calculate:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }

        .button-group button.reset {
            background-color: #6c757d;
            color: white;
        }

        .button-group button.reset:hover {
            background-color: #5a6268;
            transform: translateY(-2px);
        }

        .result-section {
            margin-top: 30px;
            padding: 20px;
            background-color: #e9f7ef;
            border: 1px solid #d4edda;
            border-radius: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        .result-section h2 {
            color: #28a745;
            font-size: 1.8em;
            margin-bottom: 15px;
            border-bottom: 2px solid #28a745;
            padding-bottom: 10px;
        }

        #gcdResult {
            font-size: 1.8em;
            font-weight: 700;
            color: #007bff;
            word-wrap: break-word;
        }

        .error-message {
            color: #dc3545;
            font-size: 1em;
            margin-top: 10px;
            min-height: 20px;
        }

        .code-snippet {
            margin-top: 40px;
            background-color: #282c34;
            color: #abb2bf;
            border-radius: 10px;
            padding: 20px;
            text-align: left;
            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .code-snippet pre {
            margin: 0;
        }

        .code-snippet code {
            display: block;
            white-space: pre-wrap;
        }

        .code-snippet .comment {
            color: #5c6370;
        }

        .code-snippet .keyword {
            color: #c678dd;
        }

        .code-snippet .function-name {
            color: #61afef;
        }

        .code-snippet .variable {
            color: #e5c07b;
        }

        .code-snippet .operator {
            color: #c678dd;
        }

        .code-snippet .number {
            color: #d19a66;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>最大公约数 (GCD) 计算器</h1>
        <p class="info-text">
            输入一串用逗号分隔的整数，本工具将计算这些整数的最大公约数 (GCD)。
            GCD 是指能够同时整除这些整数的最大正整数。
        </p>

        <div class="input-section">
            <label for="numberInput">输入整数 (用逗号分隔):</label>
            <input type="text" id="numberInput" placeholder="例如: 8, 12, 24">
            <div class="error-message" id="errorMessage"></div>
            <div class="button-group">
                <button class="calculate" id="calculateBtn">计算 GCD</button>
                <button class="reset" id="resetBtn">重置</button>
            </div>
        </div>

        <div class="result-section">
            <h2>计算结果</h2>
            <p>最大公约数是: <span id="gcdResult">-</span></p>
        </div>

        <div class="code-snippet">
            <p><code>gcd</code> 核心代码片段:</p>
            <pre><code>
<span class="keyword">const</span> <span class="function-name">gcd</span> = (<span class="operator">...</span><span class="variable">arr</span>) => {
    <span class="keyword">const</span> <span class="function-name">_gcd</span> = (<span class="variable">x</span>, <span class="variable">y</span>) => (<span class="operator">!</span><span class="variable">y</span> <span class="operator">?</span> <span class="variable">x</span> <span class="operator">:</span> <span class="function-name">_gcd</span>(<span class="variable">y</span>, <span class="variable">x</span> <span class="operator">%</span> <span class="variable">y</span>));
    <span class="keyword">return</span> [<span class="operator">...</span><span class="variable">arr</span>].<span class="function-name">reduce</span>((<span class="variable">a</span>, <span class="variable">b</span>) => <span class="function-name">_gcd</span>(<span class="variable">a</span>, <span class="variable">b</span>));
};
            </code></pre>
        </div>
    </div>

    <script>
        // 核心函数：计算最大公约数 (GCD)
        const gcd = (...arr) => {
            // 欧几里得算法实现两个数的GCD
            const _gcd = (x, y) => {
                x = Math.abs(x);
                y = Math.abs(y);
                while (y) {
                    [x, y] = [y, x % y];
                }
                return x;
            };

            if (arr.length === 0) {
                return 0; // 或者抛出错误，根据需求定义
            }
            if (arr.length === 1) {
                return Math.abs(arr[0]);
            }

            // 使用reduce计算多个数的GCD
            return arr.reduce((a, b) => _gcd(a, b));
        };

        // UI 元素
        const numberInput = document.getElementById('numberInput');
        const calculateBtn = document.getElementById('calculateBtn');
        const resetBtn = document.getElementById('resetBtn');
        const gcdResult = document.getElementById('gcdResult');
        const errorMessage = document.getElementById('errorMessage');

        // 计算 GCD 并显示结果
        function calculateAndDisplayGCD() {
            const inputVal = numberInput.value.trim();
            errorMessage.textContent = ''; // 清空错误信息
            gcdResult.textContent = '-'; // 重置结果显示

            if (inputVal === '') {
                errorMessage.textContent = '请输入数字。';
                return;
            }

            const numbers = inputVal.split(',').map(num => {
                const parsed = parseInt(num.trim(), 10);
                return isNaN(parsed) ? null : parsed;
            });

            // 检查是否有无效输入
            if (numbers.includes(null)) {
                errorMessage.textContent = '输入包含无效数字，请确保所有输入都是整数。';
                return;
            }

            // 过滤掉空字符串或非数字的输入，确保数组不为空
            const validNumbers = numbers.filter(num => num !== null);

            if (validNumbers.length === 0) {
                errorMessage.textContent = '请输入至少一个有效数字。';
                return;
            }

            const result = gcd(...validNumbers);
            gcdResult.textContent = result;
        }

        // 重置输入和结果
        function resetCalculator() {
            numberInput.value = '';
            gcdResult.textContent = '-';
            errorMessage.textContent = '';
        }

        // 绑定事件监听器
        calculateBtn.addEventListener('click', calculateAndDisplayGCD);
        resetBtn.addEventListener('click', resetCalculator);

        // 允许按回车键计算
        numberInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                calculateAndDisplayGCD();
            }
        });
    </script>
</body>

</html>